<template>
    <el-dialog
    title="参看菜单/按钮"
    :visible.sync="dialogVisible"
    width="30%"
    custom-class="menu-see-dialog"
    >
    <div class="menu-detail">
        <div class="menu-detail-item">
            菜单名称：{{menuInfo.name}}
        </div>
         <div class="menu-detail-item">
            类型：{{menuInfo.name}}
        </div>
         <div class="menu-detail-item">
            菜单地址：{{menuInfo.name}}
        </div>
         <div class="menu-detail-item">
            菜单图标：<img src="https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1681391545,4187928589&fm=85&s=0D803C72F2A477157583DA4D0300C0EE" alt="">
        </div>
         <div class="menu-detail-item">
            权限描述：{{menuInfo.name}}
        </div>
         <div class="menu-detail-item">
            上级菜单：{{menuInfo.name}}
        </div>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
    </span>
    </el-dialog>
</template>
<script>
export default {
    name: 'menuSeeDialog',
    props: {
        menuInfo: {
            type: Object,
            default () {
                return {
                    name: '项目设置'
                }
            }
        },
        showDialog: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            dialogVisible: false
        }
    },
    watch: {
        'dialogVisible' (state) {
            if (!state) {
                this.$emit('close')
            }
        },
        'showDialog' (state) {
            if (state) {
                this.dialogVisible = true
            }
        }
    }
}
</script>
<style lang="less">
.menu-see-dialog {
    .menu-detail {
        width: 100%;
        .menu-detail-item {
           font-size: 14px;
           padding: 10px 0;
        }
    }
}
</style>
